
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  //入口文件 ：有且有多个
  entry: {
    main: ["./src/main.js"]
  },
  //出口文件 ：有且只有一个
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'),
    filename: '[name]-bundle.js'
  },
  //模块 ：解读css,图片如何转换，压缩
  module: {
    /**
     * 注意： webpack 处理第三方文件类型的过程：
     * 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
     * 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；
     * 3. 在调用loader 的时候，是从后往前调用的；
     * 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到  bundle.js 中去
     */
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },                  //配置处理 .css文件的第三方loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },  //配置处理 .less文件的第三方loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },   //配置处理 .scss文件的第三方loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },                  //配置处理 .url文件的第三方loader
      { test: /\.html$/, use: ['html-loader'] },                                 //配置处理 .html文件的第三方loader
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },                 // 配置处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },           // 配置 Babel 来转换高级的ES语法
      { test: /\.vue/, use: 'vue-loader' }                                       //配置处理 .vue 文件的第三方loader
    ]
  },
  //插件：用于生产模版和各项功能
  plugins: [
    // 创建一个 在内存中 生成 HTML  页面的插件
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ],
  //配置webpack开发服务功能  
  devServer: {
    overlay: true    //如果有错误信息就会在页面上显示  
  },
  //webpack alias配置
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
}






